<template>
  <span>
    <el-popover placement="bottom" width="250" trigger="click">
      <template #reference>
        <span>
          <!-- <i class="el-icon-s-operation cursor-pointer" /> -->
          <svg-icon icon-class="Operation" class="cursor-pointer"/>
        </span>
      </template>
      <div class="popover-setting">
        <h3 v-show="list.conditions">{{ $t('common.conditions_filter') }}</h3>
        <div
          v-show="list.conditions"
          class="bg-gray-200 h-px"
          style="margin: 5px -12px"
        />
        <el-checkbox-group
          v-model="settings.conditions"
          v-show="list.conditions"
          @change="saveToLocal"
          class="flex flex-col"
        >
          <el-checkbox
            v-for="condition in list.conditions"
            :key="condition.code"
            :label="condition.code"
          >{{ condition.title }}</el-checkbox
          >
        </el-checkbox-group>
        <h3 v-show="list.columns">{{ $t('common.table_column_filter') }}</h3>
        <div
          v-show="list.columns"
          class="bg-gray-200 h-px"
          style="margin: 5px -12px"
        />
        <el-checkbox-group
          v-model="settings.columns"
          v-show="list.columns"
          @change="saveToLocal"
          class="flex flex-col"
        >
          <el-checkbox
            v-for="column in list.columns"
            :key="column.code"
            :label="column.code"
          >{{ column.title }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
    </el-popover>
  </span>
</template>

<script>
import { setDomainValue, getDomainValue } from '@/components/page-setting/local-storage-util'
export default {
  computed: {},
  data() {
    return {
      settings: {
        conditions: [],
        columns: []
      },
      rootNode: {}
    }
  },
  component: [setDomainValue, getDomainValue],
  props: {
    /**
     * 展示可供选择的列表
     */
    list: {
      conditions: Array,
      columns: Array
    },
    /**
     * 存储在 local storage 里面的域
     */
    domain: String,

    /**
     * 当没在 local storage 中没有取到对应的配置时，使用此配置
     */
    defaultSetting: {
      conditions: Array,
      columns: Array
    }
  },
  methods: {
    saveToLocal() {
      setDomainValue(this.domain, this.settings)
      this.$emit('update:settings', this.settings)
    }
  },
  mounted() {
    if (this.domain == undefined) {
      alert('The domain parameter is not set')
      return
    }
    this.rootNode = this.$store.getters['pageSettings']
    this.appStoreSetting = getDomainValue(
      this.rootNode,
      this.domain,
      this.defaultSetting || this.settings
    )
    if (this.appStoreSetting['conditions']) {
      this.settings.conditions = this.appStoreSetting['conditions']
    } else {
      this.settings.conditions = []
    }
    if (this.appStoreSetting['columns']) {
      this.settings.columns = this.appStoreSetting['columns']
    } else {
      this.settings.columns = []
    }
    this.$emit('update:settings', this.settings)
  }
}
</script>
